<template>
  <div id="app">
    <!-- 返回导航 -->
    <header class="heards">
      <van-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        v-if="!showTab"
      />
    </header>

    <!-- 控制tablebar显示及隐藏 -->
    <div class="footBar" v-if="!showTab">
      <router-view />
    </div>
    <div class="footBar tbs" v-if="showTab">
      <router-view />
    </div>

    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/topic">专题</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/car">购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { ref, getCurrentInstance, toRaw } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
export default {
  setup(props) {
    const userInFo = {
      openId: "15978738332",
      nickName: "赵六",
      gender: 1,
      language: "zh_CN",
      city: "Changping",
      province: "Beijing",
      country: "China",
      avatarUrl:
        "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
      watermark: { timestamp: 1535513485, appid: "wx601ce71bde7b9add" },
    };
    const openId = userInFo.openId;
    localStorage.setItem("userInfo", JSON.stringify(userInFo));
    localStorage.setItem("openId", openId);
    //默认选中
    const active = ref(0);
   
    //获取路由元数据判断是否展示
    const router = useRouter();
    const showTab = ref(null);
    router.beforeEach((to, from) => {
      showTab.value = to.meta.isShowFoot;

    });
    // 返回上一页
     const onClickLeft = () => {
       router.go(-1)
    };
    return {
      active,
      onClickLeft,
      showTab,
    };
  },
};
</script>
<style lang="scss">
body,
html {
  background: #f4f4f4;
  .heards {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  #app {
    height: calc(100% - 1px);
    border-top: 1px solid transparent;
  }
}
</style>
<style lang="scss">
.footBar {
  height: calc(100% - 93px);
  margin-top: 50px;
  overflow: hidden;
  border-top: 1px solid transparent;
}
.tbs{
  height: calc(100% - 100px);
  overflow: auto;
  margin-top: 0;
}
</style>
